import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {Button, Card, Descriptions, Divider, Form, Input, message, Spin} from "antd";
import {
  getInterfaceInfoByIdUsingGET, invokeInterfaceInfoUsingPOST,
} from "../../services/yuapi-backend/interfaceInfoController";
import {useParams} from "@@/exports";

/**
 *
 *    ====== 加载单个接口 具体信息 ======
  * @constructor
 */
const Index: React.FC = () => {
  // 状态变量
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo>();
  const params = useParams();
  const [invokeRes,setInvokeRes] = useState<any>();
  const [invokeLoading,setInvokeLoading] = useState(false);
  //1、加载数据
  const loadData = async ()=>{
    if(!params.id){
      message.error('参数不存在');
      return;
    }
    setLoading(true);
    try{
      const res = await getInterfaceInfoByIdUsingGET({
        id:Number(params.id),
      });
        setData(res.data);
    }catch(error:any){
      message.error('请求失败.' + error.message);
    }
    setLoading(false);
  }

// 2、初始化数据
  // 非常重要的加载数据 ： 加载数据的逻辑   useEffect在首次加载时向后台发送请求
  useEffect(()=>{
  loadData();
  },[])

// 3、提交表单的方法
  const onFinish = async(values: any) => {
    if(!params.id){
      message.error("接口不存在");
      return;
    }
    setInvokeLoading(true);
    try{
      const res = await invokeInterfaceInfoUsingPOST({
        id:params.id,
        ...values,
      })
      setInvokeRes(res.data);
      message.success("请求成功");
      }
      catch(error:any){
      message.error('请求失败.' + error.message);
    }
    setInvokeLoading(false);
  };


  // 4、页面逻辑
  //渲染数据的逻辑
  return (
    <PageContainer title={"查看接口文档"}>
      <Card>
        {data ? (
            <Descriptions title={data.name} column={1}>
              <Descriptions.Item label="接口状态">{data.status ? '开启' : '关闭'}</Descriptions.Item>
              <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
              <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
              <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
              <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
              <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
              <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
              <Descriptions.Item label="更新时间">{data.updateTime}</Descriptions.Item>

            </Descriptions>
        ) : (
          <>接口不存在</>
        )
        }
      </Card>
      {/* eslint-disable-next-line react/jsx-no-undef */}

      <Divider/>
      <Card title="在线测试">
        <Form
        name="invoke"
        layout="vertical"
        onFinish={onFinish}
      >
        <Form.Item
          label="请求参数"
          name="userRequestParams"
        >
          <Input.TextArea />
        </Form.Item>

        <Form.Item wrapperCol={{span: 16 }}>
          <Button type="primary" htmlType="submit">
            调用
          </Button>
        </Form.Item>
      </Form>
      </Card>
      <Divider/>

      <Card title="返回结果" loading={invokeLoading}>
        {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default Index;



